<template>
    <div>
        <!-- 按钮组 -->
        <div>
            <el-button type="primary" icon="el-icon-edit" @click="openDialog('add')">添加</el-button>
            <el-button type="primary" icon="el-icon-share" @click="openDialog('modify')">修改</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="openDialog('delete')">删除</el-button>
            <el-button type="primary" icon="el-icon-search" @click="openDialog('search')">搜索</el-button>
        </div>
        <!-- 添加日程 -->
        <div>
            <!-- 添加提示框 -->
            <el-dialog ref="addDialog" title="添加日程" :visible.sync="addDialogVisible" width="30%"
                :before-close="handleClose">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="日期" >
                        <el-input  v-model="ruleForm.date" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="行程" >
                        <el-input v-model="ruleForm.schedule" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closeDialog('add')">取 消</el-button>
                        <el-button type="primary" @click="closeDialog('add')">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!-- <el-form><span>{{ message }}</span>
                    <div>
                        <input type="text" placeholder="请输入日程" />
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="closeDialog('add')">取 消</el-button>
                        <el-button type="primary" @click="closeDialog('add')">确 定</el-button>
                    </span>
                </el-form> -->
            </el-dialog>
            <!-- 修改提示框 -->
            <el-dialog title="修改日程" :visible.sync="modifyDialogVisible" width="30%" :before-close="handleClose">
                <span>日期</span>
                <div>
                    <input type="text" placeholder="请输入日程" />
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog('modify')">取 消</el-button>
                    <el-button type="primary" @click="closeDialog('modify')">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 删除提示框 -->
            <el-dialog ref="deleteDialog" title="删除日程" :visible.sync="deleteDialogVisible" width="30%"
                :before-close="handleClose">
                <span>日期</span>
                <div>
                    <input type="text" placeholder="请输入日程" />
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog('delete')">取 消</el-button>
                    <el-button type="primary" @click="closeDialog('delete')">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 搜索提示框 -->
            <el-dialog ref="searchDialog" title="搜索日程" :visible.sync="searchDialogVisible" width="30%"
                :before-close="handleClose">
                <span>日期</span>
                <div>
                    <input type="text" placeholder="请输入日程" />
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog('search')">取 消</el-button>
                    <el-button type="primary" @click="closeDialog('search')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { addscheduleApi,getscheduleApi } from '@/api/schedule'
export default {
    props: ["calenderData"],
    watch: {
        calenderData(val) {
            this.ruleForm.date = val;
          

       
        },
    },
    data() {
        return {
            message:"",
            addDialogVisible: false,
            modifyDialogVisible: false,
            deleteDialogVisible: false,
            searchDialogVisible: false,
            ruleForm : {
                date: "",
                schedule: "",
            },
            rules: {},
        };
    },
    methods: {
        openDialog(type) {
            switch (type) {
                case "add":
                    this.addDialogVisible = true;
                    break;
                case "modify":
                    this.modifyDialogVisible = true;
                    break;
                case "delete":
                    this.deleteDialogVisible = true;
                    break;
                case "search":
                    this.searchDialogVisible = true;
                    break;
            }
        },
        closeDialog(type) {
            switch (type) {
                case "add":
                    this.addDialogVisible = false;
                    this.loaddata();
                    break;
                case "modify":
                    this.modifyDialogVisible = false;
                    break;
                case "delete":
                    this.deleteDialogVisible = false;
                    break;
                case "search":
                    this.searchDialogVisible = false;
                    break;
            }
        },
        async loaddata() {
            let res = await addscheduleApi(this.ruleForm)
        },

        handleClose() { },
    },
};
</script>

<style></style>